<template>
  <div class="wrapper">
    <!-- v-if="list.length"当真正的数组过来后，swiper才会被创建，这样可以保证传过来显示的是第一张图 -->
    <swiper :options="swiperOption" v-if="showSwiper">
        <!-- slides -->
        <swiper-slide v-for="item of list" :key="item.id">
          <img class="swiper-img" :src="item.imgUrl" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination', // 把选项传到里面，显示小圆点
        loop: true // 实现轮播循环
      }
    }
  },
  computed: {
    showSwiper () {
      // v-if="list.length"当真正的数组过来后，swiper才会被创建，这样可以保证传过来显示的是第一张图
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped> //scoped表示样式只修饰当前的wrapper
  .wrapper >>> .swiper-pagination-bullet-active //如果想改变小圆点样式，应在.wrapper>>>指向小圆点
    background: #FFFFFF
  .wrapper //在轮播图外建一个div，并定义宽高,防止页面刷新慢时出现抖动
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 30.4%
    background: #CACACA
    .swiper-img
      width: 100%
</style>
